//@import '../../var';
@import '../../style/theme/index';
@import 'var';

@include theme {
  //@debug "$colorPrimary ---- ---- --- #{$colorPrimary}";

  .text-color--primary {
    color: $colorPrimary;
  }
  .background-color-primary{
    background-color: $colorPrimary;
  }

  .doc-page-menu {
    box-sizing: border-box;
    position: fixed;
    top: $headerHeight + 4px;
    bottom: 0;
    width: $menuWidth;
    background-color: #ffffff;
    overflow: auto;

    &__list {
      padding: 20px 0 200px 0 !important;
    }

    ul {
      margin:0;
      padding:0;

      .doc-page-menu__list__title + *{
        margin-top: 12px;
      }

      li {
        box-sizing: border-box;
        list-style: none;
        font-size: 16px;
        line-height: 36px;

        &.doc-page-menu__list__title {
          font-size: 12px;
          font-weight: bold;
          line-height: 20px;
          color: white;
          display: inline-block;
          padding: 0 8px;
          margin-left: 4px;
          border-radius: 4px;
        }

        &.doc-page-menu__list__group {
          & > div {
            font-weight: 600;
            padding: 0 8px;

            & > svg {
              margin-right: 8px;
            }
          }
        }

        &.doc-page-menu-link {
          cursor: pointer;
          padding-left: 32px;
          transition: background-color 150ms linear;

          span.doc-page-menu-tip {
            font-size: 14px;
            margin-left: 8px;
            opacity: 0.75;
          }

          &:not(:hover):not(.doc-page-menu-link--active) {
            &,& span.doc-page-menu-tip {
              color: #3f536e;
            }
          }

          &:hover {
            background-color: $bg;
          }

          &.doc-page-menu-link--active {
            background: linear-gradient(45deg, rgba(254, 172, 94, 0.25), rgba(199, 121, 208, 0.25), rgba(75, 192, 200, 0.25));
            padding-left: 8px;

            & > svg {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }

  .doc-page-content {
    box-sizing: border-box;
    padding-top: $headerHeight + 4px;
    padding-left: $menuWidth + 4px;
    padding-right: $anchorWidth + 4px;
    min-height: 100vh;
    background: $bg;
  }

  .doc-page-anchor {
    box-sizing: border-box;
    position: fixed;
    top: $headerHeight + 4px;
    right: 0;
    bottom: 0;
    width: $anchorWidth;
    background-color: #ffffff;

    &__list {
      margin: 0;
      padding: 20px 0;

      &__item {
        list-style: none;
        padding: 6px 8px 6px 48px;
        box-sizing: border-box;
        position: relative;
        font-size: 12px;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.45);

        &__index {
          font-style:italic;
        }

        &__tag {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 8px;
          width: 36px;
          display: flex;
          align-items: center;
          justify-content: center;

          &__inner {
            width: 12px;
            height: 12px;
            border-radius: 99px;
            background-color: rgba($colorPrimary, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 300ms linear;

            &:after {
              width: 4px;
              height: 4px;
              border-radius: 99px;
              background-color: $colorPrimary;
              content: '';
              transition: background-color 300ms linear;
              z-index: 1;
            }
          }

          &:after {
            position: absolute;
            left: calc(50% - 1px);
            top: 0;
            bottom: 0;
            border-left: dashed 1px rgba($colorPrimary, 0.2);
            content: '';
          }
        }

        &:hover, &--active {
          text-decoration: underline;
          color: $colorPrimary;
        }

        &--active {
          .doc-page-anchor__list__item__tag__inner{
            background-color: $colorPrimary;

            &:after {
              width: 10px;
              height: 10px;
              background: white;
            }
          }
        }
      }
    }
  }
}
